<template>
	<view class="content">
		<projectSelect :showIcon="false" :projectName="project_name"></projectSelect>
		<u-picker
		 :show="showPicker" 
		 :columns="pickerList"
		 closeOnClickOverlay
		 @cancel="showPicker = false"
		 @close="showPicker = false"
		 @confirm="confirmPicker"
		 ></u-picker>
		<view class="section-1">
			<banner @toPlace="toPlace" :info="info" ref="banner" :whether='whether' :project_minid=project_minid></banner>
		</view>
		<HeaderCharts :projectId="project_id" :projectType="2" :analysisProps="analysis" :info="this.info" ></HeaderCharts>
		<view class="section-3">
			<view class="wrapper wrapper-title">
				<view class="title">
					进度填报 
				</view>
				<view class="list">
					<view :class="`list-body ${curIdx === 0 ? 'list-body_prev' : 'list-body_next'}`">
						<view class="tower-list">
							<view :class="`item item__${item.state}`" v-for="item in list" :key="item.id" @click="handleSelect(item)">
								<view class="name">{{item.t_no}}</view>
								<view :class="`check ${selected.findIndex(e => e === item.id) !== -1 ? 'check__active' : ''}`" >
									<view class="check-on"></view>
								</view>
							</view>
						</view>
						<view class="btns">
							<view @click="handleMark(item.state)" :class="`btn ${key === 'notStart' ? 'notStart': ''}`" :style="{backgroundColor: item.color}" v-for="(item, key) in btnList" :key="key">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-4" v-if="!project_id">
			<view  class="wrapper wrapper-title">
				<view class="section-2" >
					<view class="form" >
						<view class="form-label" style="width: 140rpx;">
							<view class="label">架线进度：</view>
						</view>
						<view class="form-item" style="width: 440rpx;">
							<view class="input-2" v-show="!project_id">
								<u--input
									type="number"
									placeholderClass="input-placeholder"
									class="input-body"
								    placeholder="请输入架线进度"
								    v-model="finish_total"
								  ></u--input>
								  <view class="iconfont">km</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-4" v-if="!project_id">
			<view class="wrapper wrapper-title">
				<view class="section-2" :style="{height:fileList.length == 0 ? 'unset' : '150rpx'}">
					<view class="form upload-wrap" style="padding-bottom: 16rpx;">
						<view class="form-label" style="width: 140rpx;">
							<view class="label">现场照片：</view>
						</view>
						<view v-show="!project_id" class="form-item"
							:style="{border: fileList.length == 0 ? 'solid 2rpx #1534ce' : 'none', width: '440rpx', height: 'auto'}">
							<u-upload :fileList="fileList" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic"
								multiple :maxCount="1"
								:style="{position:'relative',height: fileList.length == 0 ? '44rpx' : 'unset', borderRadius: '20rpx'}">
								<view class="iconfont icon-tupian"></view>
							</u-upload>
						</view>
					</view>
					<view class="form" >
						<view class="form-label" style="width: 140rpx;">
							<view class="label">图片描述：</view>
						</view>
						<view class="form-item" style="width: 440rpx;">
							<view class="input-2" v-show="!project_id">
								<u--input
									placeholderClass="input-placeholder"
									class="input-body"
								    placeholder="请输入图片描述"
								    v-model="remark"
								  ></u--input>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-4" v-if="project_id">
			<view class="wrapper wrapper-title">
				<view class="section-2" :style="{height:fileList.length == 0 ? 'unset' : '250rpx'}">
					<view class="form" >
						<view class="form-label" style="width: 140rpx;">
							<view class="label">架线进度：</view>
						</view>
						<view class="form-item" style="width: 440rpx;">
							<view class="input-2" v-show="project_id">
								<input
									placeholderClass="input-placeholder"
									class="input-body"
								    placeholder="请输入架线进度"
								    v-model="finish_total"
									disabled='true'
								  ></input>
								  <view class="iconfont">km</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="section-4" v-if="project_id">
			<view class="wrapper wrapper-title">
				<view class="section-2" :style="{height:fileList.length == 0 ? 'unset' : '250rpx'}">
					<view class="form upload-wrap" style="padding-bottom: 16rpx;">
						<view class="form-label" style="width: 140rpx;">
							<view class="label">现场照片：</view>
						</view>
						<view v-show="project_id" class="form-item" :style="{border: fileList.length == 0 ? 'solid 2rpx #1534ce' : 'none', width: '440rpx', height: 'auto'}">
							<view :style="{position:'relative',height: fileList.length == 0 ? '44rpx' : 'unset', borderRadius: '20rpx'}">
								<view class="iconfont icon-tupian"></view>
							</view>
						</view>
						
					</view>
					<view class="form" >
						<view class="form-label" style="width: 140rpx;">
							<view class="label">图片描述：</view>
						</view>
						<view class="form-item" style="width: 440rpx;">
							<view class="input-2" v-show="project_id">
								<input
									placeholderClass="input-placeholder"
									class="input-body"
								    placeholder="请输入图片描述"
								    v-model="remark"
									disabled='true'
								  ></input>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="section-4" v-if="project_id">
			<view class="wrapper wrapper-title">
				<view class="section-2" :style="{height:fileList.length == 0 ? 'unset' : '250rpx'}">
					<view class="form" >
						<view class="form-label" style="width: 140rpx;">
							<view class="label">问题描述：</view>
						</view>
						<view class="form-item" style="width: 440rpx;">
							<view class="input-2" v-show="project_id">
								<input
									placeholderClass="input-placeholder"
									class="input-body"
								    placeholder="请输入问题描述"
								    v-model="describe"
									disabled="true"
								  ></input>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="custom-button" @click="goImgs('/pages/work/manager/work_manage/progress/road/imgs/index')">查看历史图片</view>
		<view v-if="!project_id" class="custom-button" @click="submit">提交进度上报</view>
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
		import banner from '@/components/banner/index.vue';
	import HeaderCharts from '../component/header.vue'
	import projectSelect from '@/components/project_select/index.vue';
	import {
		reportAddApi, reportApi
	} from '@/api/report.js'
	import { uploadUrl } from '@/baseUrl.js';
	import {
		towerListApi, towerUpdateApi
	} from '@/api/statistics.js'
	export default {
		components: {
			banner,
			HeaderCharts, 
			projectSelect
		},
		data() {
			return {
				project_id: false,
				project_minid:"",
				fileList: [],
				finish_total:'',
				btnList: {
					base: { name: '基础在建', color: '#8fcf51', state: 2 },
					tower: { name: '立塔在建', color: '#00cdb4', state: 4 },
					line: { name: '架线在建', color: '#339999', state: 6  },
					baseFin: { name: '基础完成', color: '#11a8ee', state: 3 },
					towerFin: {name: '立塔完成', color: '#2d6ffd', state: 5 },
					lineFin: { name: '架线完成', color: '#0555c2', state: 7 },
					notStart: { name: '未开始', color: '#ffffff', state: 1  },
				},
				list: [],
				// progress: {},
				curIdx: 0,
				curType: 'base',
				selected: [],
				pickerList: [
					['T1', 'T2', 'T3', 'T4',]
				],
				showPicker: false,
				start: "T1",
				end: 'T2',
				type: 'start',
				finish_total: '',
				remark: '',
				analysis: {},
				towerImgs: [],
				project_name: "",
				describe:'',
				info:{},
				whether:false
			}
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject'
			})
		},
		methods: {
			...mapActions({ setCurProject: 'system/setCurProject' }),
			toPlace() {
				uni.navigateTo({
					url: '/pages/statistics/project/place/index?name=' + this.curProject.project_name + '&id=' + this.curProject.id
				})
			},
			async submit() {
				/*
				obj.remark = this.remark;
				*/
			   if(this.finish_total > Number(this.analysis.line_total)){
				   uni.showToast({
				   	title:'不能大于当前长度',
					icon:'none'
				   })
				   return
			   }
			  uni.showLoading({
				  title:'提交中...',
				mask:true
			  })
				let data = JSON.stringify(this.list);
				let j = await towerUpdateApi({
					project_id: this.curProject.id,
					info: data,
					type: 2,
					finish_total:this.finish_total,
					remark: this.remark,
					describe: this.describe,
					file_id: this.fileList[0] ? this.fileList[0].url : ''
				})
				if (j.code = 1) {
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
					setTimeout(function() {
						uni.redirectTo({
							url:'/pages/work/manager/work_manage/progress/road/index'
						})
					}, 1000);
				}
			},
			renderStyle(type) {
				if (type == 'base') {
					return "backgroundColor: green";
				}
			},
			openPicker(type) {
				this.showPicker = true;
				this.type = type;
			},
			confirmPicker(e) {
				this[this.type]=e.value[0];
				this.type = '';
				this.showPicker = false;
			},
			handleSelect(item) {
				if (this.project_id) {
					return;
				}
				const index = this.selected.findIndex(e => e === item.id);
				if (index !== -1) {
					this.selected.splice(index, 1);
				} else {
					this.selected.push(item.id);
				}
			},
			handleMark(state) {
				if (this.project_id) {
					return;
				}
				if (this.selected.length === 0) {
					return;
				}
				// let arr = this.selected.concat(this.progress[type]);
				let _list = [];
				this.list.forEach(item => {
					if (this.selected.indexOf(item.id) !== -1) {
						_list.push({ ...item, state, changed: true });
					} else {
						_list.push(item);
					}
				})
				// this.progress[type] = arr;
				this.selected = [];
				this.list = _list;
			},
			// markBuild() {
			// 	if (this.selected.length === 0) {
			// 		return;
			// 	}
			// 	let arr = this.selected.concat(this.build);
			// 	this.build = arr;
			// 	this.selected = [];
			// },
			// markFin() {
			// 	if (this.selected.length === 0) {
			// 		return;
			// 	}
			// 	let arr = this.selected.concat(this.fin);
			// 	this.fin = arr;
			// 	this.selected = [];
			// },
			setCurIdx(idx, type) {
				this.curIdx = idx;
				this.curType = type;
			},
			goImgs(path) {
				uni.navigateTo({
					url: path + '?id=' + (this.project_id ? this.project_id : this.curProject.id)
				})
			},
			go(type) {
				uni.navigateTo({
					url: '/pages/work/manager/work_manage/progress/info/index?type=' + type
				})
			},
			async getTower() {
				uni.showLoading({title: '加载中...'});
				const { data } = await towerListApi({
					project_id: this.project_id ? this.project_id : this.curProject.id,
				});
				uni.hideLoading();
				if (data.code == 1) {
					this.describe = data.data.describe.describe
					this.list = data.data.data;
				}
			},
			async getReport() {
				uni.showLoading({title: '加载中...'});
				const { data } = await reportApi({
					project_id: this.project_id ? this.project_id : this.curProject.id,
				});
				uni.hideLoading();
				if (data.code === 1) {
					this.analysis = data.data;
					this.finish_total = this.analysis.line_finish
				}
			},
			
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.file_id
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 1000)
						}
					});
				})
			},
		},
		onReady() {
			this.getTower();
			this.getReport();
			this.$refs.banner.fetchList()
		},
		onLoad(data) {
			this.project_minid = data.project_id;
			this.info=this.curProject
			if (data.project_id) {
				this.project_id = data.project_id
			}
			if (data.project_name) {
				this.project_name = data.project_name
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-button {
		margin-top: 60rpx;
		margin-bottom: 85rpx;
		box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
	}
	.section-3{
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 40rpx;
		.list{
			width: 100%;
			.list-body{
				width: 100%;
				background-color: #fff;
				.btns{
					box-sizing: border-box;
					width: 100%;
					padding-top: 15rpx;
					padding-right: 15rpx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					.btn{
						width: 184rpx;
						height: 48rpx;
						background-color: #00cdb4;
						border-radius: 24rpx;
						text-align: center;
						line-height: 48rpx;
						font-size: 26rpx;
						color: #fff;
						margin-bottom: 25rpx;
					}
					.notStart{
						box-sizing: border-box;
						background-color: #fff;
						color: #3b3c40;
						border: 3rpx solid #3b3c40;
						line-height: 42rpx;
					}
				}
				.tower-list{
					width: 100%;
					box-sizing: border-box;
					padding-top: 40rpx;
					max-height: 300rpx;
					overflow-y: auto;
					// overflow-y:scroll;
					@include clear();
					.item{
						float: left;
						min-width: calc(100% / 5);
						@include clear();
						margin-bottom: 25rpx;
						.name{
							
							height: 30rpx;
							line-height: 30rpx;
							float: left;
							font-size: 26rpx;
							color: #3b3c40;
							font-weight: bold;
							margin-right: 10rpx;
							transition: 0.3s ease;
						}
					}
					.item__2{ // 基础在建
						.name{color: #8fcf51;}
						.check{border: solid 1rpx #8fcf51;
							.check-on{background-color: #8fcf51;opacity: 1;transform: scale(1);}
						}
					}
					.item__4{ // 立塔在建
						.name{color: #00cdb4;}
						.check{border: solid 1rpx #00cdb4;
							.check-on{background-color: #00cdb4;opacity: 1;transform: scale(1);}
						}
					}
					.item__6{ // 架线在建
						.name{color: #339999;}
						.check{border: solid 1rpx #339999;
							.check-on{background-color: #339999;opacity: 1;transform: scale(1);}
						}
					}
					.item__3{ // 基础完成 
						.name{color: #11a8ee;}
						.check{border: solid 1rpx #11a8ee;
							.check-on{background-color: #11a8ee;opacity: 1;transform: scale(1);}
						}
					}
					.item__5{ // 立塔完成
						.name{color: #2d6ffd;}
						.check{border: solid 1rpx #2d6ffd;
							.check-on{background-color: #2d6ffd;opacity: 1;transform: scale(1);}
						}
					}
					.item__7{ // 架线完成
						.name{color: #0555c2;}
						.check{border: solid 1rpx #0555c2;
							.check-on{background-color: #0555c2;opacity: 1;transform: scale(1);}
						}
					}
					.check{
						width: 24rpx;
						height: 24rpx;
						border: solid 1rpx #000000;
						border-radius: 50%;
						float: left;
						margin-top: 3rpx;
						position: relative;
						.check-on{
							transition: 0.3s ease;
							opacity: 0;
							transform: scale(0.5);
							border-radius: 50%;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							width: 18rpx;
							height: 18rpx;
							background-color: #000000;
						}
					}
					.check__active{
						border: solid 1rpx #000000!important;
						.check-on{
							background-color: #000000!important;
							opacity: 1;
							transform: scale(1);
						}
					}
				}
			}
			.list-body_prev{
				border-top-right-radius: 50rpx;
			}
			.list-body_next{
				border-top-left-radius: 50rpx;
			}
			
		}
		.section-body{
			box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
			border-radius: 50rpx;
			overflow: hidden;
		}
	}

	.wrapper{
	
		width: 670rpx;
		margin-left: 40rpx;
		border-radius: 35rpx;
		background-size: cover;
		background-repeat: no-repeat;
		overflow: hidden;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
		padding: 15rpx 40rpx;
		margin-bottom: 25rpx;
	
		.label {
			width: 135rpx;
			float: left;
			font-size: 26rpx;
			font-weight: bold;
			font-stretch: normal;
			height: 48rpx;
			line-height: 48rpx;
			letter-spacing: 0px;
			color: #46464a;
		}
	
		.title {
			width: 100%;
			height: 30rpx;
			line-height: 30rpx;
			border-bottom: solid 3rpx #f2f2f0;
			font-size: 26rpx;
			font-weight: bold;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #46464a;
			padding-bottom: 28rpx;
			.input{
				float: right;
				.input-item{
					float: left;
					line-height: 34rpx;
					height: 34rpx;
					text-align: center;
					border-radius: 17rpx;
					border: solid 1rpx #cbcbcd;
					padding: 0 16rpx;
					font-size: 26rpx;
					color: #3b3c40;
					.iconfont{
						font-size: 26rpx;
						color: #1d33c6;
						transform: rotate(90deg);
					}
				}
				.input-split{
					float: left;
					width: 24rpx;
					height: 2rpx;
					background-color: #3b3c40;
					margin-left: 10rpx;
					margin-right: 10rpx;
					margin-top: 17rpx;
				}
			}
			.iconfont {
				float: right;
				font-size: 26rpx;
				color: #1433cd;
				font-weight: normal;
			}
		}
	
		.value {
			float: left;
			width: 445rpx;
			.road{
				width: 100%;
				padding-top: 40rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;
				.road-label{
					float: left;
					font-size: 16rpx;
					color: #3b3c40;
					margin-right: 10rpx;
					height: 30rpx;
					line-height: 30rpx;
				}
				.road-content{
					float: left;
					width: 420rpx;
					height: 14rpx;
					background-color: #d8d8d5;
					border-radius: 7rpx;
					overflow: hidden;
					margin-top: 8rpx;
					.road-percent{
						width: 60%;
						height: 100%;
						background-color: #2d5dfe;
					}
				}
				.road-value{
					font-size: 16rpx;
					color: #3b3c40;
					float: left;
					margin-left: 10rpx;
					height: 30rpx;
					line-height: 30rpx;
				}
			}
			.fin-tips{
				padding-top: 40rpx;
				padding-bottom: 20rpx;
				font-size: 26rpx;
				color: #0535d6;
				text{
					margin: 0 20rpx;
				}
			}
			.tips{
				width: 100%;
				padding-top: 28rpx;
				text-align: center;
				font-size: 20rpx;color: #3b3c40;
			}
			.tree{
				
				.tree-item{
					width: 100%;
					border-bottom: solid 2rpx #f2f2f0;
						
					.parent {
						width: 100%;
						@include clear();
						.name {					
							width: 400rpx;
							line-height: 30rpx;
							padding: 26rpx 0;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 2rpx;
							color: #3b3c40;
							float: left;
						}
						
						.count {
							float: right;
							min-width: 46rpx;
							height: 46rpx;
							margin-top: 18rpx;
							border-radius: 28rpx;
							line-height: 46rpx;
							text-align: center;
							font-size: 26rpx;
							font-weight: bold;
							color: #395cf5;
							background: #ffde00;
							text {
								font-size: 16rpx;
							}
						}
						
						.action {
							float: right;
							width: 32rpx;
							margin-right: 18rpx;
							line-height: 82rpx;
							text-align: center;
							color: #3b3c40;
						
							.iconfont {
								font-size: 32rpx;
								transition: 0.2s ease;
								transform: rotate(90deg);
							}
						
						}
					}
					.child {
						width: 100%;
	
						.child-item {
							box-sizing: border-box;
							padding-left: 0rpx;
							width: 100%;
							// border-bottom: 2rpx solid #e3e8f5;
							@include clear();
							&:last-child {
								border-bottom: none;
							}
							
							
							.top {
								width: 100%;
								overflow: hidden;
								box-sizing: border-box;
								padding-left: 40rpx;
						
								.name {
									float: left;
									width: calc(100% - 150rpx);
									box-sizing: border-box;
									padding: 26rpx 0;
									color: #3b3c40;
									font-size: 24rpx;
								}
						
								.action {
									width: 32rpx;
									line-height: 82rpx;
									float: right;
									text-align: center;
									color: #7f98ae;
									margin-right: 18rpx;
									.iconfont {
										font-size: 32rpx;
										transition: 0.2s ease;
										transform: rotate(90deg);
									}
								}
							}
						}
					}
					
					.grad{
						width: 100%;
						.grad-item{
							width: 100%;
				
							&:last-child {
								border-bottom: none;
							}
							
							.grad-top {
								width: 100%;
								overflow: hidden;
								box-sizing: border-box;
								padding-left: 40rpx;
								.name {
									float: left;
									width: 260rpx;
									line-height: 30rpx;
									color: #3b3c40;
									font-size: 22rpx;
									padding-left: 40rpx;
									box-sizing: border-box;
									margin-right: 16rpx;
								}
								.input-value{
								
									display: inline-block;
									float: left;
									width: 146rpx;
									height: 48rpx;
									border-radius: 20rpx;
									border: solid 2rpx #1534ce;
									margin: 0 auto;
									margin-bottom: 17rpx;
									@include clear();
									position: relative;
									.iconfont {
										position: absolute;
										right: 25rpx;
										top: 0rpx;
										font-size: 30rpx;
										color: #dad9df;
									}
									.label {
										float: left;
										width: 134rpx;
										height: 48rpx;
										text-align: center;
										line-height: 44rpx;
										font-size: 26rpx;
										font-weight: normal;
										font-stretch: normal;
										letter-spacing: 0rpx;
										color: #1534ce;
									}
								
									.shape {
										width: 3rpx;
										height: 32rpx;
										background-color: #7f98ae;
										float: left;
										margin-top: 8rpx;
									}
								
									.input {
										float: left;
										width: 100%;
										padding-top: 0;
								
										.input-body {
											box-sizing: border-box;
											width: 100%;
											height: 44rpx;
											padding: 0 !important;
											border: none;
											padding-left: 30rpx !important;
											padding-right: 30rpx !important;
											font-size: 26rpx;
											font-weight: normal;
											font-stretch: normal;
											letter-spacing: 0rpx;
											color: rgba(0, 0, 0, 0.7);
										}
								
										.input-placeholder {
											font-size: 26rpx;
											font-weight: normal;
											font-stretch: normal;
											letter-spacing: 0rpx;
											color: rgba(0, 0, 0, 0.5);
										}
									}
									
								}
								// .desc{
								// 	float: left;
								// 	width: calc(100% - 40rpx);
								// 	font-size: 16rpx;
								// 	color: #9b9b9b;
								// 	box-sizing: border-box;
								// 	padding-left: 50rpx;
								// 	padding-bottom: 26rpx;
								// 	text{
								// 		min-width: 300rpx;
								// 		margin-right: 30rpx;
								// 		display: inline-block;
								// 	}
								// }
							}
						}
					}
					.action__active{
						.iconfont{
							transform: rotate(-90deg)!important;
						}
					}
					
				}
				.item__expand {
						.parent {
							.action {
								.iconfont {
									transform: rotate(-90deg);
								}
							}
						}
				
						.child {
							// box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.05) inset;
						}
					}
			}
			.audio {
				width: 50rpx;
				height: 50rpx;
				background-color: #ffffff;
				border-radius: 50%;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				overflow: hidden;
	
				.audio-center {
					margin-top: 13rpx;
					margin-left: 13rpx;
					border-radius: 50%;
					width: 24rpx;
					height: 24rpx;
					background-color: #ed451b;
				}
			}
	
			.upload-wrap {
				width: 100%;
				min-height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #0535d6;
				position: relative;

				.iconfont {
					position: absolute;
					right: 25rpx;
					line-height: 44rpx;
					color: #1534ce;
					font-size: 28rpx;
				}
			}
	
			.date {
				width: 100%;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #0535d6;
				line-height: 48rpx;
				position: relative;
				font-size: 26rpx;
				color: rgba(0, 0, 0, 0.7);
				box-sizing: border-box;
				padding-left: 20rpx;
				text-align: center;
				color: #0535d6;
	
				.iconfont {
					position: absolute;
					right: 25rpx;
					top: 2rpx;
					font-size: 30rpx;
					color: #dad9df;
				}
			}
	
			.picker {
				width: 100%;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #0535d6;
				line-height: 48rpx;
	
				text {
					font-size: 26rpx;
					letter-spacing: 0rpx;
					color: rgba(#46464a, 0.5);
					margin-left: 28rpx;
				}
	
				.iconfont {
					float: right;
					font-size: 32rpx;
				}
			}
	
			.input {
				padding-top: 18rpx;
	
				.input-body {
					box-sizing: border-box;
					width: 100%;
					height: 44rpx;
					padding: 0 !important;
					border: none;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.7);
				}
	
				.input-placeholder {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.5);
				}
			}
	
			.textarea {
				width: 100%;
				height: 300rpx;
				line-height: 30rpx;
	
				.textarea-body {
					box-sizing: border-box;
					width: 100%;
					height: 300rpx;
					border: none;
					padding: 18rpx 0rpx !important;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
	
					/deep/ .u-textarea__field {
						height: auto !important;
						font-size: 25rpx;
					}
				}
	
				/deep/ .u-textarea--disabled {
					background-color: #fff;
				}
	
				.textarea-placeholder {
					font-size: 25rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 50rpx;
					letter-spacing: 3rpx;
					color: rgba(0, 0, 0, 0.5);
				}
			}
		}
	
		.l-value {
			width: 100%;
		}
		
	}

	.section-2 {
		width: 100%;
		padding-top: 30rpx;
		@include clear();
		.upload-wrap {
			align-items: unset;
			height: unset;
			line-height: unset;
	
		}

		/deep/ .u-upload__wrap {

			background-color: transparent;
		}

		.icon-tupian {
			position: absolute;
			right: 25rpx;
			line-height: 44rpx;
			color: #1534ce;
			font-size: 28rpx;
		}

		width: 670rpx;
		background-color: #ffffff;
		margin-bottom: 40rpx;

		.form {
			width: 100%;
			text-align: center;
			// padding-top: 40rpx;
			// padding-left: 40rpx;
			box-sizing: border-box;
	
			@include clear();

			.form-label {
				display: inline-block;
				font-size: 26rpx;
				font-weight: bold;
				font-stretch: normal;
				line-height: 48rpx;
				letter-spacing: 0rpx;
				color: #46464a;
				float: left;
			}

			.form-item {
				display: inline-block;
				float: left;
				width: 464rpx;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
				margin: 0 auto;
				@include clear();
				.input-2{
					width: 100%;
					height: 48rpx;
					border-radius: 20rpx;
					line-height: 48rpx;
					position: relative;
					font-size: 26rpx;
					color: rgba(0, 0, 0, 0.7);
					// padding-left: 20rpx;
					text-align: center;
					color: #0535d6;
					position: relative;
					.iconfont{
						top: 0;
						position: absolute;
						right: 25rpx;
						line-height: 44rpx;
						color: #1534ce;
						font-size: 28rpx;
					}
					.input-body{
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0!important;
						border: none;
						padding-left: 30rpx!important;
						padding-right: 30rpx!important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0,0,0,0.7);
					}
					.input-placeholder{
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0,0,0,0.5);
					}
					
				}
				.label {
					float: left;
					width: 134rpx;
					height: 48rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
				}

				.shape {
					width: 3rpx;
					height: 32rpx;
					background-color: #7f98ae;
					float: left;
					margin-top: 8rpx;
				}

				.input {
					float: left;
					width: 100%;

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}

					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}
		}
	}

	.section-1 {
		width: 100%;
		background-color: #2e5efe;
		margin-bottom: 50rpx;

		.section-body {
			width: 100%;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			overflow: hidden;
			box-sizing: border-box;
			background-color: #fff;
			padding: 0 40rpx;
		}
	}
</style>
